<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<html>
<head>
    <title>图书信息</title>
    <script src="tools/layui-v2.5.5/layui/layui.js" type="text/javascript"></script>
    <script src="js/jquery-3.2.1.js" type="text/javascript"></script>
    <script src="js/vue-2.4.0.js" type="text/javascript"></script>
    <script src="tools/bootstrap-3.3.7-dist/js/bootstrap.js" type="text/javascript"></script>
    <link href="tools/bootstrap-3.3.7-dist/css/bootstrap.css" type="text/css" rel="stylesheet">
    <link href="tools/layui-v2.5.5/layui/css/layui.css" type="text/css" rel="stylesheet">

</head>
<style>
    .div01{
        margin-top: 20px;
        margin-left: 10px;
    }
    #addInfo{
        margin-top: 20px;
        padding: 10px;
    }
</style>
<body>
<div id="app">

<%--<div class="div01" >--%>
<%--    <div class="layui-form-item">--%>
<%--    <div class="layui-inline">--%>
<%--        <label class="layui-form-label">请输入书名</label>--%>
<%--        <div class="layui-input-inline">--%>
<%--            <input type="text" v-model="bookName" name="bookName" lay-verify="required|phone" autocomplete="off" class="layui-input">--%>
<%--        </div>--%>
<%--    </div>--%>
<%--    <div class="layui-inline">--%>
<%--        <label class="layui-form-label">请输入作者</label>--%>
<%--        <div class="layui-input-inline">--%>
<%--            <input type="text" v-model="author" name="author" lay-verify="email" autocomplete="off" class="layui-input">--%>
<%--        </div>--%>
<%--    </div>--%>
<%--        <button class="layui-btn" @click="submit">查询</button>--%>
<%--</div>--%>


<%--</div>--%>
    <div class="div01">
        <form class="form-inline">
            <div class="form-group">
                <label for="exampleInputName2">请输入书名</label>
                <input type="text" class="form-control" v-model="bookName" id="exampleInputName2" placeholder="请输入图书名">
            </div>
            <div class="form-group">
                <label for="exampleInputEmail2">请输入作者</label>
                <input type="email" class="form-control" v-model="author" id="exampleInputEmail2" placeholder="请输入作者名">
            </div>
            <button type="button" @click="submit" class="btn btn-default">查询</button>
        </form>
        <button type="button" class="layui-btn layui-btn-normal" @click="add">上架</button>
    </div>

<div>
    <table class="layui-table">
        <colgroup>
            <col width="150">
            <col width="200">
            <col>
        </colgroup>
        <thead>
        <tr>
            <th>图书编号</th>
            <th>图书名称</th>
            <th>作者</th>
            <th>数量</th>
            <th>是否预定</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
         <c:forEach items="${bookpages.list}" var="book">
             <tr>
                 <td>${book.book_id}</td>
                 <td>${book.book_name}</td>
                 <td>${book.author}</td>
                 <td>${book.number}</td>
                 <td>${book.yuding}</td>
                 <td>
                     <button type="button" class="layui-btn layui-btn-danger" @click="del(${book.book_id})">下架</button>
                 </td>
             </tr>
         </c:forEach>

        </tbody>
    </table>
</div>
<%--    <div style="border: red 1px solid;margin-top: 500px">--%>
<%--        当前第 ${bookpages.pageNum} 页.总共 ${bookpages.pages} 页.一共 ${bookpages.total} 条记录--%>
<%--    </div>--%>
    <div>
        <nav aria-label="Page navigation">
            <ul class="pagination">

                <li><a href="getBookByPage?curr=1">首页</a></li>

                <!--上一页-->
                <li>
                    <%--hasPreviousPage 如果有上一页--%>
                    <c:if test="${bookpages.hasPreviousPage}">
                        <a href="getBookByPage?curr=${bookpages.pageNum-1}"
                           aria-label="Previous">
                            <span aria-hidden="true">«</span>
                        </a>
                    </c:if>
                </li>

                <!--循环遍历连续显示的页面，若是当前页就高亮显示，并且没有链接-->
                <%--navigatepageNums  导航页码数 --%>
                <c:forEach items="${bookpages.navigatepageNums}" var="page_num">
                    <c:if test="${page_num == bookpages.pageNum}">
                        <li class="active"><a href="#">${page_num}</a></li>
                    </c:if>
                    <c:if test="${page_num != bookpages.pageNum}">
                        <li>
                            <a href="getBookByPage?curr=${page_num}">${page_num}</a>
                        </li>
                    </c:if>
                </c:forEach>

                <!--下一页-->
                <li>
                    <c:if test="${bookpages.hasNextPage}">
                        <a href="getBookByPage?curr=${bookpages.pageNum+1}"
                           aria-label="Next">
                            <span aria-hidden="true">»</span>
                        </a>
                    </c:if>
                </li>

                <li><a href="getBookByPage?curr=${bookpages.pages}">尾页</a></li>
            </ul>
        </nav>
    </div>

    <%--弹出层--%>
    <div hidden="hidden" id="addInfo">
        <form class="layui-form" action="">
            <div class="layui-form-item">
                <label class="layui-form-label">编号</label>
                <div class="layui-input-inline">
                    <input type="text" name="book_num" required lay-verify="required" placeholder="请输入图书名称" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">名称</label>
                <div class="layui-input-inline">
                    <input type="text" name="book_name" required lay-verify="required" placeholder="请输入图书名称" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">作者</label>
                <div class="layui-input-inline">
                    <input type="text" name="author2" required lay-verify="required" placeholder="请输入作者名" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">数量</label>
                <div class="layui-input-inline">
                    <input type="text" name="number2" required lay-verify="required" onkeyup="value=value.replace(/[^\d]/g, '').replace(/^0{1,}/g,'')" placeholder="请输入数字格式" autocomplete="off" class="layui-input">
                </div>
            </div>


            <div class="layui-form-item">
                <label class="layui-form-label">是否已经预定</label>
                <div class="layui-input-block">
                    <input type="radio" name="yuding" value="是" title="是" checked>
                    <input type="radio" name="yuding" value="否" title="否" >
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="formDemo">提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </div>
</div>


</body>
<script>
    var layer;
    var app;
    var form;
    layui.use(['layer','form'], function(){
        layer = layui.layer;
        form=layui.form;

        //监听提交
        form.on('submit(formDemo)', function(data){
            // console.log(data.field.number)
            // layer.msg(JSON.stringify(data.field));
            /**
             * 数据校验
             */


            $.ajax({
                url:"addInfo",
                type:'post',
                dataType:"json",
                data:{
                    book_name:data.field.book_name,
                    author2:data.field.author2,
                    number2:data.field.number2,
                    yuding:data.field.yuding,
                    book_num:data.field.book_num

                },
                success:function (result) {
                    if (result.code==1){
                       alert("添加成功！")
                        window.location.reload();
                    }


                }



            })
            return false;
        });
    });
     app=new Vue({
        el:"#app",
        data:{
            bookName:"",
            author:"",
            list:""
        },
        methods:{
            submit:function () {
                if (this.bookName==""&&this.author==""){
                    layer.msg("请输入查询信息")
                }else {
                    //弹出层
                    layer.open({
                        type: 2,
                        area: ['900px', '300px'],
                        content: ['querybook?bookName='+this.bookName+"&author="+this.author,'no'] //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
                    });
                    this.bookName="";
                    this.author="";
                }
            },
            add:function () {
                //弹出层
                layer.open({
                    type: 1,
                    area: ['420', '460'],
                    content: $('#addInfo') //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
                });
            },
            del:function (id) {
                // alert(id)
                layer.confirm('确定删除?', {icon: 3, title:'提示'}, function(index){
                    //do something
                    $.ajax({
                        url:"deleInfo",
                        type:"post",
                        dataType:"json",
                        data:{
                            id:id
                        },
                        success:function (result) {
                            if (result.code==1){
                                // alert("删除成功")
                                window.location.reload();
                            }
                        }
                    })
                    layer.close(index);
                });


            }

        }
    })



</script>
</html>
